<template>
  <!-- <cTopBar /> -->
  <TopNavBar />
  <div
    style="
      display: flex;
      min-height: 100vh;
      background: #f5f6fa;
      min-width: 90vw;
    "
  >
    <!-- 右侧：所有笔记+写笔记功能区 -->
    <div style="flex: 1; display: flex; gap: 24px; margin: 24px 24px 24px 0">
      <!-- 分类树形所有笔记列表 -->
      <div
        style="
          width: 230px;
          margin-left: 10px;
          min-width: 200px;
          background: white;
          border-radius: 12px;
          box-shadow: 0 2px 8px #eee;
          padding: 20px 12px;
          height: fit-content;
        "
      >
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <h2 style="font-size: 18px; font-weight: bold; margin-bottom: 12px">
            所有笔记
          </h2>
          <div style="display: flex; align-items: center; gap: 8px">
            <template v-if="!deleteMode">
              <button
                class="primary"
                style="
                  margin-bottom: 8px;
                  width: 70px;
                  border: none;
                  background-color: white;
                  margin-top: 10px;
                  border-radius: 20px;
                "
                @click="createNewNote"
              >
                <span style="font-size: 15px">新增</span>
              </button>
            </template>
            <span
              class="icon-btn"
              @click="onDeleteBtnClick"
              :title="deleteMode ? '删除选中' : '批量删除'"
              style="margin-left: 8px; margin-right: 8px"
            >
              <!-- 垃圾桶SVG -->
              <svg
                viewBox="0 0 24 24"
                width="22"
                height="22"
                fill="none"
                stroke="#e74c3c"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <polyline points="3 6 5 6 21 6"></polyline>
                <path
                  d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"
                ></path>
                <line x1="10" y1="11" x2="10" y2="17"></line>
                <line x1="14" y1="11" x2="14" y2="17"></line>
              </svg>
            </span>
            <button
              v-if="deleteMode"
              class="primary"
              style="
                margin-bottom: 8px;
                width: 70px;
                border: none;
                background-color: white;
                margin-top: 10px;
                border-radius: 20px;
              "
              @click="cancelDeleteMode"
            >
              <span style="font-size: 15px">删除</span>
            </button>
          </div>
        </div>
        <div style="margin-bottom: 10px"></div>
        <div v-if="notes.length > 0">
          <ul style="padding: 0; margin: 0; list-style: none">
            <li
              v-for="cat in categoryTree"
              :key="cat.category"
              style="margin-bottom: 8px"
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                "
              >
                <div style="display: flex; align-items: center">
                  <template v-if="deleteMode">
                    <span
                      @click.stop="
                        toggleSelectToDelete('category', cat.category)
                      "
                      :class="
                        isSelectedToDelete('category', cat.category)
                          ? 'selected-del'
                          : 'unselected-del'
                      "
                      style="margin-right: 6px; cursor: pointer"
                    >
                      <svg
                        v-if="isSelectedToDelete('category', cat.category)"
                        width="18"
                        height="18"
                        viewBox="0 0 24 24"
                        fill="#e74c3c"
                      >
                        <circle cx="12" cy="12" r="9" />
                        <polyline
                          points="9 12 11.5 14.5 15 10"
                          stroke="#fff"
                          stroke-width="2"
                          fill="none"
                        />
                      </svg>
                      <svg
                        v-else
                        width="18"
                        height="18"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="#e74c3c"
                        stroke-width="2"
                      >
                        <circle cx="12" cy="12" r="9" />
                      </svg>
                    </span>
                  </template>
                  <div
                    @click="toggleCategoryOpen(cat)"
                    style="
                      cursor: pointer;
                      font-weight: bold;
                      color: #1976d2;
                      user-select: none;
                    "
                  >
                    <span>{{ cat.open ? "▼" : "▶" }}</span> {{ cat.category }}
                  </div>
                </div>
              </div>
              <ul v-show="cat.open" style="padding-left: 18px; margin: 0">
                <li
                  v-for="note in cat.notes"
                  :key="note.id"
                  style="margin-bottom: 6px"
                >
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    "
                  >
                    <div style="display: flex; align-items: center">
                      <template v-if="deleteMode">
                        <span
                          @click.stop="toggleSelectToDelete('note', note.id)"
                          :class="
                            isSelectedToDelete('note', note.id)
                              ? 'selected-del'
                              : 'unselected-del'
                          "
                          style="margin-right: 6px; cursor: pointer"
                        >
                          <svg
                            v-if="isSelectedToDelete('note', note.id)"
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="#e74c3c"
                          >
                            <circle cx="12" cy="12" r="9" />
                            <polyline
                              points="9 12 11.5 14.5 15 10"
                              stroke="#fff"
                              stroke-width="2"
                              fill="none"
                            />
                          </svg>
                          <svg
                            v-else
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="#e74c3c"
                            stroke-width="2"
                          >
                            <circle cx="12" cy="12" r="9" />
                          </svg>
                        </span>
                      </template>
                      <span
                        @click="selectNote(note.id)"
                        style="
                          color: black;
                          font-size: 15px;
                          padding-left: 5px;
                          cursor: pointer;
                        "
                        >{{ note.title }}</span
                      >
                    </div>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div v-else style="text-align: center; color: #aaa; margin-top: 40px">
          暂无笔记
        </div>
      </div>
      <!-- 写笔记功能区 -->
      <div
        style="
          flex: 1;
          background: #fff;
          border-radius: 12px;
          box-shadow: 0 2px 12px #e0e0e0;
          padding: 32px 28px;
          min-width: 350px;
        "
      >
        <h1 style="font-size: 22px; font-weight: bold; margin-bottom: 18px">
          笔记
        </h1>
        <div style="display: flex">
          <div
            style="
              margin-bottom: 12px;
              display: flex;
              align-items: center;
              gap: 8px;
            "
          >
            <span>文件名：</span>
            <input
              v-model="filename"
              placeholder="请输入文件名"
              style="
                padding: 4px 8px;
                border: 1px solid #ccc;
                border-radius: 4px;
                min-width: 180px;
              "
            />
          </div>
          <div
            style="
              margin-bottom: 12px;
              margin-left: 20px;
              display: flex;
              align-items: center;
              gap: 8px;
            "
          >
            <span>分类：</span>
            <input
              v-model="noteCategory"
              placeholder="请输入分类"
              style="
                padding: 4px 8px;
                border: 1px solid #ccc;
                border-radius: 4px;
                min-width: 120px;
              "
            />
          </div>
        </div>
        <div ref="editorRoot" style="min-height: 500px"></div>
        <div style="margin-top: 8px; display: flex; gap: 12px">
          <button class="primary" v-if="!selectedNoteId" @click="sendToBackend">
            保存
          </button>
          <button class="primary" v-if="selectedNoteId" @click="updateNote">
            保存修改
          </button>
        </div>
      </div>
    </div>
    <!-- 右侧悬浮大纲栏 -->
    <div
      :style="
        tocSidebarOpen
          ? 'position: fixed; top: 200px; right: 0; width: 260px; background: #fff; box-shadow: -2px 0 12px #e0e0e0; border-radius: 12px 0 0 12px; z-index: 1001; padding: 18px 14px; transition: right 0.3s;'
          : 'position: fixed; top: 200px; right: 0; width: 40px; background: #fff; box-shadow: -2px 0 12px #e0e0e0; border-radius: 12px 0 0 12px; z-index: 1001; padding: 0; transition: right 0.3s;'
      "
    >
      <button
        @click="tocSidebarOpen = !tocSidebarOpen"
        style="
          position: absolute;
          left: -40px;
          top: 20px;
          width: 80px;
          height: 40px;
          border-radius: 20px;
          background: #eee;
          color: black;
          font-weight: bold;
          border: 1px solid #ccc;
          cursor: pointer;
        "
      >
        {{ tocSidebarOpen ? "close" : "大纲" }}
      </button>
      <div v-show="tocSidebarOpen">
        <br />
        <br />
        <TocTree :nodes="tocTree" @jump="scrollToHeading" />
      </div>
    </div>
  </div>
  <cEndBar />
</template>

<script setup lang="ts">
import {
  ref,
  onMounted,
  watch,
  nextTick,
  defineComponent,
  h,
  getCurrentInstance,
  computed,
} from "vue";
// @ts-ignore
import Editor from "@toast-ui/editor";
import "@toast-ui/editor/dist/toastui-editor.css";
import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight";
// @ts-ignore
import Prism from "prismjs";
import "prismjs/themes/prism.css";
import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
// @ts-ignore
import { post } from "@/util/request";
// @ts-ignore
import cTopBar from "@/components/cTopBar.vue";
// @ts-ignore
import cEndBar from "@/components/cEndBar.vue";
// @ts-ignore
import TopNavBar from "@/components/TopNavBar.vue";
const mode = ref<"markdown">("markdown");
const filename = ref("");
const markdownText = ref("");
const editorRoot = ref<HTMLDivElement | null>(null);
let editorInstance: Editor | null = null;

// 目录树结构
interface TocNode {
  text: string;
  level: number;
  line: number;
  children: TocNode[];
  open: boolean;
  parent?: TocNode;
}
const tocTree = ref<TocNode[]>([]);

function buildTocTree(md: string): TocNode[] {
  const lines = md.split("\n");
  const flat: TocNode[] = [];
  lines.forEach((line, idx) => {
    const match = line.match(/^(#{1,6})\s+(.+)/);
    if (match) {
      flat.push({
        text: match[2],
        level: match[1].length,
        line: idx,
        children: [],
        open: true,
      });
    }
  });
  // 构建树
  const root: TocNode = {
    text: "",
    level: 0,
    line: -1,
    children: [],
    open: true,
  };
  const stack: TocNode[] = [root];
  for (const node of flat) {
    while (stack.length > 1 && node.level <= stack[stack.length - 1].level) {
      stack.pop();
    }
    node.parent = stack[stack.length - 1];
    stack[stack.length - 1].children.push(node);
    stack.push(node);
  }
  return root.children;
}

function updateTocTree(md: string) {
  tocTree.value = buildTocTree(md);
}

function scrollToHeading(item: TocNode) {
  if (!editorInstance) return;
  editorInstance.setSelection([item.line + 1, 1]);
  editorInstance.focus();
}

watch(mode, async (val) => {
  if (val === "markdown") {
    await nextTick();
    if (editorRoot.value) {
      if (editorInstance) {
        editorInstance.destroy();
      }
      editorInstance = new Editor({
        el: editorRoot.value,
        height: "400px",
        initialEditType: "markdown",
        previewStyle: "vertical",
        initialValue: markdownText.value,
        plugins: [[codeSyntaxHighlight, { highlighter: Prism }]],
        hooks: {
          addImageBlobHook: async (
            blob: File,
            callback: (url: string, altText: string) => void
          ) => {
            const formData = new FormData();
            formData.append("image", blob);
            try {
              const response = await agentAxios.post("/upload", formData, {
                headers: { "Content-Type": "multipart/form-data" },
              });
              const imageUrl = response.data.url;
              callback(imageUrl, blob.name);
            } catch (e) {
              alert("图片上传失败");
            }
            return false;
          },
        },
        events: {
          change: () => {
            updateTocTree(editorInstance!.getMarkdown());
          },
        },
      });
      updateTocTree(editorInstance.getMarkdown());
    }
  }
});

const notes = ref<any[]>([]);
const selectedNoteId = ref<number | null>(null);
const tocSidebarOpen = ref(false);

const NOTEBOOK_CACHE_KEY = "notebook_cache";

function saveCache() {
  const cache = {
    filename: filename.value,
    content: editorInstance ? editorInstance.getMarkdown() : "",
    selectedNoteId: selectedNoteId.value,
  };
  localStorage.setItem(NOTEBOOK_CACHE_KEY, JSON.stringify(cache));
}

function restoreCache() {
  const cacheStr = localStorage.getItem(NOTEBOOK_CACHE_KEY);
  if (cacheStr) {
    try {
      const cache = JSON.parse(cacheStr);
      filename.value = cache.filename || "";
      markdownText.value = cache.content || "";
      selectedNoteId.value = cache.selectedNoteId || null;
    } catch {}
  }
}

watch(filename, saveCache);
watch(selectedNoteId, saveCache);

onMounted(() => {
  restoreCache();
  if (mode.value === "markdown" && editorRoot.value) {
    editorInstance = new Editor({
      el: editorRoot.value,
      height: "400px",
      initialEditType: "markdown",
      previewStyle: "vertical",
      initialValue: markdownText.value,
      plugins: [[codeSyntaxHighlight, { highlighter: Prism }]],
      hooks: {
        addImageBlobHook: async (
          blob: File,
          callback: (url: string, altText: string) => void
        ) => {
          const formData = new FormData();
          formData.append("image", blob);
          try {
            const response = await agentAxios.post("/upload", formData, {
              headers: { "Content-Type": "multipart/form-data" },
            });
            const imageUrl = response.data.url;
            callback(imageUrl, blob.name);
          } catch (e) {
            alert("图片上传失败");
          }
          return false;
        },
      },
      events: {
        change: () => {
          updateTocTree(editorInstance!.getMarkdown());
          saveCache();
        },
      },
    });
    updateTocTree(editorInstance.getMarkdown());
  }
  fetchAllNotes();
});

// 递归目录树组件
const TocTree = defineComponent({
  name: "TocTree",
  props: {
    nodes: { type: Array as () => TocNode[], required: true },
  },
  emits: ["jump"],
  setup(props, { emit }) {
    const toggle = (node: TocNode) => {
      node.open = !node.open;
    };
    const renderNode = (node: TocNode): any => {
      return h(
        "li",
        {
          style: {
            marginLeft: (node.level - 1) * 16 + "px",
            userSelect: "none",
            fontWeight: node.level === 1 ? "bold" : "normal",
          },
        },
        [
          node.children.length > 0
            ? h(
                "span",
                {
                  style: {
                    cursor: "pointer",
                    marginRight: "4px",
                    color: "#1976d2",
                  },
                  onClick: (e: Event) => {
                    e.stopPropagation();
                    toggle(node);
                  },
                },
                node.open ? "▼" : "▶"
              )
            : null,
          h(
            "span",
            {
              style: { cursor: "pointer", color: "#1976d2" },
              onClick: () => emit("jump", node),
            },
            node.text
          ),
          node.open && node.children.length > 0
            ? h(
                "ul",
                { style: { listStyle: "none", padding: 0, margin: 0 } },
                (node.children as TocNode[]).map(renderNode)
              )
            : null,
        ]
      );
    };
    return () =>
      h(
        "ul",
        { style: { listStyle: "none", padding: 0, margin: 0 } },
        (props.nodes as TocNode[]).map(renderNode)
      );
  },
});

const { proxy } = getCurrentInstance()!;
// @ts-ignore
const agentAxios = proxy.$agentAxios;

const searchText = ref("");
const selectedCategory = ref("全部");
const categories = ref(["全部"]);

const filteredNotes = computed(() => {
  return notes.value.filter((note) => {
    const matchTitle = note.title.includes(searchText.value);
    const matchCategory =
      selectedCategory.value === "全部" ||
      (note.category || "未分类") === selectedCategory.value;
    return matchTitle && matchCategory;
  });
});

async function fetchAllNotes() {
  try {
    // 从sessionStorage获取用户信息
    const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
    const user = userInfo?.username || userInfo?.name || "游客";
    const response = await agentAxios.get(`/notes/${user}`);
    notes.value = response.data;
    // 更新分类
    const cats = Array.from(
      new Set(notes.value.map((n) => n.category || "未分类"))
    );
    categories.value = ["全部", ...cats];
    if (notes.value.length === 0) {
      filename.value = "";
      markdownText.value = "";
      selectedNoteId.value = null;
      noteCategory.value = "";
      if (editorInstance) {
        editorInstance.setMarkdown("");
      }
    }
  } catch (e: any) {
    alert(
      "获取笔记列表失败: " +
        (e?.response?.data?.detail || e.message || "未知错误")
    );
  }
}

async function selectNote(noteId: number) {
  try {
    const response = await agentAxios.get(`/note/${noteId}`);
    const note = response.data;
    filename.value = note.title;
    noteCategory.value = note.category || "";
    if (editorInstance) {
      editorInstance.setMarkdown(note.content);
    }
    selectedNoteId.value = noteId;
    saveCache();
  } catch (e: any) {
    alert(
      "获取笔记详情失败: " +
        (e?.response?.data?.detail || e.message || "未知错误")
    );
  }
}

async function updateNote() {
  if (!editorInstance || !selectedNoteId.value) return;
  // 从sessionStorage获取用户信息
  const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
  const user = userInfo?.username || userInfo?.name || "游客";
  const title = filename.value || "未命名";
  const content = editorInstance.getMarkdown();
  const category = noteCategory.value || "未分类";
  try {
    await agentAxios.put(`/note/${selectedNoteId.value}`, {
      user,
      title,
      content,
      category,
    });
    alert("笔记已更新！");
    fetchAllNotes();
  } catch (e: any) {
    alert(
      "更新失败: " + (e?.response?.data?.detail || e.message || "未知错误")
    );
  }
}

function createNewNote() {
  filename.value = "";
  markdownText.value = "";
  selectedNoteId.value = null;
  noteCategory.value = "";
  if (editorInstance) {
    editorInstance.setMarkdown("");
  }
}

const noteCategory = ref("");

async function sendToBackend() {
  if (!editorInstance) return;
  // 从sessionStorage获取用户信息
  const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
  const user = userInfo?.username || userInfo?.name || "游客";
  const title = filename.value || "未命名";
  const content = editorInstance.getMarkdown();
  const category = noteCategory.value || "未分类";
  try {
    const response = await agentAxios.post("/add_note", {
      user,
      title,
      content,
      category,
    });
    alert("笔记已保存！");
    fetchAllNotes();
  } catch (e: any) {
    alert(
      "保存失败: " + (e?.response?.data?.message || e.message || "未知错误")
    );
  }
}

const categoryOpenMap = ref<Record<string, boolean>>({});

const categoryTree = computed(() => {
  // 分组
  const groups: Record<string, any[]> = {};
  notes.value.forEach((note) => {
    const cat = note.category || "未分类";
    if (!groups[cat]) groups[cat] = [];
    groups[cat].push(note);
  });
  // 转为树形结构，open状态由Map管理
  return Object.entries(groups).map(([category, notes]) => ({
    category,
    notes,
    open:
      categoryOpenMap.value[category] !== undefined
        ? categoryOpenMap.value[category]
        : true,
  }));
});

function toggleCategoryOpen(cat: any) {
  categoryOpenMap.value[cat.category] = !cat.open;
}

const deleteMode = ref(false);
const selectedToDelete = ref<
  { type: "category" | "note"; id: string | number }[]
>([]);

function onDeleteBtnClick() {
  if (!deleteMode.value) {
    deleteMode.value = true;
    selectedToDelete.value = [];
  } else {
    doDeleteSelected();
  }
}
function cancelDeleteMode() {
  deleteMode.value = false;
  selectedToDelete.value = [];
}
function toggleSelectToDelete(type: "category" | "note", id: string | number) {
  const idx = selectedToDelete.value.findIndex(
    (item) => item.type === type && item.id === id
  );
  if (idx >= 0) {
    selectedToDelete.value.splice(idx, 1);
  } else {
    selectedToDelete.value.push({ type, id });
  }
}
function isSelectedToDelete(type: "category" | "note", id: string | number) {
  return selectedToDelete.value.some(
    (item) => item.type === type && item.id === id
  );
}
async function doDeleteSelected() {
  if (selectedToDelete.value.length === 0) {
    alert("请先选择要删除的分类或笔记");
    return;
  }
  if (!confirm("确定要删除选中的内容吗？")) return;

  // 检查是否删除了当前选中的笔记
  const deletedCurrentNote = selectedToDelete.value.some(
    (item) => item.type === "note" && item.id === selectedNoteId.value
  );

  // 检查是否删除了包含当前笔记的分类
  const currentNote = notes.value.find((n) => n.id === selectedNoteId.value);
  const deletedCurrentCategory =
    currentNote &&
    selectedToDelete.value.some(
      (item) => item.type === "category" && item.id === currentNote.category
    );

  for (const item of selectedToDelete.value) {
    if (item.type === "category") {
      await deleteCategory(item.id as string, true);
    } else if (item.type === "note") {
      await deleteNote(item.id as number, true);
    }
  }

  // 如果删除了当前选中的笔记或包含当前笔记的分类，清除缓存和编辑器内容
  if (deletedCurrentNote || deletedCurrentCategory) {
    filename.value = "";
    noteCategory.value = "";
    selectedNoteId.value = null;
    if (editorInstance) {
      editorInstance.setMarkdown("");
    }
    // 清除缓存
    localStorage.removeItem(NOTEBOOK_CACHE_KEY);
  }

  deleteMode.value = false;
  selectedToDelete.value = [];
  fetchAllNotes();
}

async function deleteNote(noteId: number, silent = false) {
  if (!silent && !confirm("确定要删除该笔记吗？")) return;
  try {
    await agentAxios.delete(`/note/${noteId}`);
    if (!silent) alert("笔记已删除！");

    // 如果删除的是当前选中的笔记，清除缓存和编辑器内容
    if (selectedNoteId.value === noteId) {
      filename.value = "";
      noteCategory.value = "";
      selectedNoteId.value = null;
      if (editorInstance) {
        editorInstance.setMarkdown("");
      }
      // 清除缓存
      localStorage.removeItem(NOTEBOOK_CACHE_KEY);
    }

    fetchAllNotes();
  } catch (e: any) {
    alert(
      "删除失败: " + (e?.response?.data?.detail || e.message || "未知错误")
    );
  }
}

async function deleteCategory(category: string, silent = false) {
  if (!silent && !confirm(`确定要删除分类\"${category}\"及其所有笔记吗？`))
    return;
  try {
    await agentAxios.delete(`/category/${encodeURIComponent(category)}`);
    if (!silent) alert("分类及其笔记已删除！");

    // 如果删除的分类包含当前选中的笔记，清除缓存
    const currentNote = notes.value.find((n) => n.id === selectedNoteId.value);
    if (currentNote && currentNote.category === category) {
      filename.value = "";
      noteCategory.value = "";
      selectedNoteId.value = null;
      if (editorInstance) {
        editorInstance.setMarkdown("");
      }
      // 清除缓存
      localStorage.removeItem(NOTEBOOK_CACHE_KEY);
    }

    fetchAllNotes();
  } catch (e: any) {
    alert(
      "删除失败: " + (e?.response?.data?.detail || e.message || "未知错误")
    );
  }
}

// 从sessionStorage获取用户信息
const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
const username = userInfo?.username || userInfo?.name || "游客";
</script>

<style scoped>
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
  margin-left: 4px;
  border: none;
  background: none;
  padding: 0;
}
.icon-btn:hover {
  background: #fbe9e7;
}
button {
  margin-right: 8px;
  padding: 6px 20px;
  border: 1.5px solid #1976d2;
  background: #fff;
  color: #1976d2;
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px #e0e0e0;
  outline: none;
}
button:disabled {
  background: #e0e0e0;
  color: #d4d3d3;
  border-color: #ccc;
  cursor: not-allowed;
  box-shadow: none;
}
button.primary {
  background: #c0bebe;
  color: #000000;
  border-color: #3b3b3b;
}
button.primary:hover:not(:disabled) {
  background: #d0d2d4;
  color: #9a9898;
}
button:hover:not(:disabled) {
  background: #1976d2;
  color: #bababa;
}
input[type="text"],
input[type="password"],
input[type="email"] {
  padding: 6px 10px;
  border: 1.5px solid #1976d2;
  border-radius: 5px;
  font-size: 15px;
  outline: none;
  transition: border 0.2s;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  border: 1.5px solid #1251a3;
}
.selected-del {
  background: #fbe9e7;
  border-radius: 50%;
}
.unselected-del {
  opacity: 0.5;
}
</style>
